{% liquid
  if type == 'reset'
    assign password_text = 'customer.reset_password.password' | t
    assign form_id = 'send-code-form'
    assign email_type = 'text'
  elsif type == 'register'
    assign password_text = 'customer.register.password' | t
    assign form_id='checkEmailForm'
    assign email_type = 'email'
  endif
%}

<div class="position-relative as-send-code-validate-wrap">
  <overlay-input class="form-pristine position-relative input-with-btn-overlay as-input-with-btn">
    <div class="is-invalid position-relative">
      <input type="{{ email_type }}" name="email" class="as-user-email input-pristine form-control as-input ellipsis-1" maxlength="255" id="email-register" placeholder="{{ 'customer.form.enter' | t }}{{ 'customer.register.email' | t }}" required
      data-pristine-required-message="{{ 'customer.register.email' | t | capitalize }}{{ 'customer.error.empty_error' | t }}"
      data-pristine-email-message="{{ 'customer.register.email' | t | capitalize}}{{ 'customer.error.empty_error' | t }}"
      data-pristine-maxlength-message="{{ 'customer.register.email' | t | capitalize }}{{ 'customer.error.empty_error' | t }}">
      <div class="input-btn-overlay-end small as-change-email-wrap d-none as-overlay-btn ps-1">
        <a class="as-change-email-btn" href="javascript:void(0);">{{ 'customer.verify.change' | t }}</a>
      </div>
    </div>
    <label for="email-register" class="d-none">{{ 'customer.register.email' | t }}</label>
  </overlay-input>
</div>


<overlay-input class="form-pristine mt-3 position-relative d-block as-send-code-input input-with-btn-overlay">
  <div class="is-invalid position-relative">
    <input type="text" name="verification_code" class="as-verification-code form-control input-pristine user-email-input as-input ellipsis-1" id="verificationCode" placeholder="{{ 'customer.form.enter' | t }}{{ 'customer.verify.verification_code' | t }}" minlength="6" maxlength="6" 
    data-pristine-required-message="{{ 'customer.verify.verification_code' | t | capitalize }}{{ 'customer.error.empty_error' | t }}"
    data-pristine-maxlength-message="{{ 'customer.verify.verification_code' | t | capitalize }}{{ 'customer.error.empty_error' | t }}"
    data-pristine-minlength-message="{{ 'customer.verify.verification_code' | t | capitalize }}{{ 'customer.error.empty_error' | t }}" required>
    <div class="as-send-code-wrap input-btn-overlay-end as-overlay-btn small ps-1">
      <button data-send-code="{{ 'customer.verify.send_code' | t }}" data-send-again="{{ 'customer.verify.send_again' | t }}" class="as-send-code-btn border-0 bg-transparent p-0 text-decoration-underline send-code-btn" type="button" disabled>{{ 'customer.verify.send_code' | t }}</button>
      <div class="as-countdown-wrap gray-600 d-none">
        {{ 'customer.verify.count_down_html' | t }}<span class="as-countdown-number" data-interval="{{ 'customer.verify.second' | t }}">{{'customer.verify.second' | t }}</span>s
      </div>
    </div>
  </div>
  <label for="verificationCode" class="d-none">{{ 'customer.verify.verification_code' | t }}</label>
</overlay-input>
<p class="mb-0 gray-600 mt-2 small">{{ 'customer.verify.subtext' | t }}</p>

<visible-control class="position-relative form-pristine d-block mt-3">
  <div class="is-invalid position-relative">
    <input type="password" name="password" class="form-control input-pristine as-visible-input pe-7" id="setPassword"
      data-pristine-required-message="{{ password_text | capitalize }}{{ 'customer.error.empty_error' | t }}"
      data-pristine-pattern= "/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/"
      data-pristine-pattern-message="{{ 'customer.error.format_error' | t }}"
      placeholder="{{ 'customer.form.enter' | t }}{{ password_text }}" required> 
    <div class="as-visible-control visible-control content-invisible input-btn-overlay-end cursor-pointer gray-400">
      <div class="icon-eye-off">
        {% render 'icon-eye-off' %}
      </div>
      <div class="icon-eye">
        {% render 'icon-eye' %}
      </div>
    </div>
  </div>
  <label for="setPassword" class="d-none">{{ password_text }}</label>
</visible-control>
<p class="mb-0 gray-600 mt-2 small">{{ 'customer.register.password_subtext' | t }}</p>